<template>
  <div class="f-all">
    <div class="f-header">
      <div class="f-header-1">当前位置 ：工地建设项目1</div>
      <div class="f-header-2">
        <span class="span1">安全施工天数：</span>
        <div class="dao">
          <div class="f-header-21">{{this.safetyDays}}</div>
          <div class="f-header-21" style="font-size:16px">天</div>
        </div>
        <span class="span1">&nbsp;&nbsp;&nbsp;完工天数倒计时：</span>
        <div class="dao">
          <div class="f-header-21" style="color:red">{{this.countDownDays}}</div>
          <div class="f-header-21" style="font-size:16px">天</div>
        </div>
      </div>
    </div>
    <div class="f-adiv">
      <div class="f-adiv1">
        <div class="f-adiv1-zi">统计数据</div>
        <div class="f-adiv1-two">
          <div class="f-a-two1">
            <p class="f-a-two1-zi">登记设备数量</p>
            <p class="f-a-two1-zi2">{{this.equipmentNum}}</p>
          </div>
          <div class="f-a-two1">
            <p class="f-a-two1-zi">登记车辆数量</p>
            <p class="f-a-two1-zi2">{{this.carNum}}</p>
          </div>
          <div class="f-a-two1">
            <p class="f-a-two1-zi">现场管理人数</p>
            <p class="f-a-two1-zi2">{{this.peopleNunm}}</p>
          </div>
          <div class="f-a-two1">
            <p class="f-a-two1-zi">工程参建单位</p>
            <p class="f-a-two1-zi2">{{this.companyNum}}</p>
          </div>
          <div class="f-a-two1">
            <p class="f-a-two1-zi">劳务班组</p>
            <p class="f-a-two1-zi2">{{this.groupNum}}</p>
          </div>
        </div>
      </div>
      <div class="f-adiv2">
        <div class="f-adiv1-zi">实时天气情况</div>
        <div class="tian">
          <div id="weather-v2-plugin-simple"></div>
        </div>
      </div>
    </div>
    <div class="f-bdiv">
      <div class="f-bdiv1">
        <div class="f-adiv1-zi">现场统计</div>
        <div class="f-b1-two">
          <div class="f-bi-two1">
            <p class="f-bi-two1-zi1">当前在场人数</p>
            <p class="f-bi-two1-zi2">{{this.data1}}</p>
          </div>
          <!-- <div class="f-bi-two1">
            <p class="f-bi-two1-zi1">当前在场人数</p>
            <p class="f-bi-two1-zi2">37</p>
          </div>
          <div class="f-bi-two1">
            <p class="f-bi-two1-zi1">当前在场人数</p>
            <p class="f-bi-two1-zi2">37</p>
          </div>-->
        </div>
        <!-- 折线图 -->
        <div class="f-b1-three">
          <ve-line :data="chartData" :settings="chartSettings" :color="appcoloer"></ve-line>
        </div>
      </div>
      <div class="f-bdiv2">
        <div class="f-bdiv2-1">
          <div class="f-adiv1-zi">门禁通行统计表</div>
          <div class="f-bd-table">
            <el-table
              :data="tableData"
              style="width: 95%"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            >
              <el-table-column prop="buildEquipment.equipment_name" label="设备名称" align="center"></el-table-column>
              <el-table-column prop="useNum" label="通行次数" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 车辆识别 -->
        <div class="f-bdiv2-2">
          <div class="f-el-tabs">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="车辆识别" name="first">
                <div class="car1">
                  <div class="car1-1">
                    设备总数:
                    <span class="car11-1">{{this.carEquipmentNum}}</span>
                  </div>
                  <div class="car1-2">
                    运行总数:
                    <span class="car11-1">{{this.carIngNum}}</span>
                  </div>
                </div>
                <div class="car1">
                  <div class="car1-1">
                    进入车辆数:
                    <span class="car11-1">{{this.carComeNum}}</span>
                  </div>
                  <div class="car1-2">
                    离开车辆数:
                    <span class="car11-1">{{this.carOutNum}}</span>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="监控设备" name="second">
                <div class="car1">
                  <div class="car1-1">
                    设备总数:
                    <span class="car11-1">{{this.monitorNum}}</span>
                  </div>
                  <div class="car1-2">
                    运行总数:
                    <span class="car11-1">{{this.monitorIngNum}}</span>
                  </div>
                </div>
                <div class="car1">
                  <div class="car1-1">
                    今日预警:
                    <span class="car11-1">{{this.monitorWaringNum}}</span>
                  </div>
                  <div class="car1-2">
                    已处理:
                    <span class="car11-1">{{this.monitorDealNum}}</span>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="塔吊" name="third">
                <div class="car1">
                  <div class="car1-1">
                    设备总数:
                    <span class="car11-1">{{this.towerNum}}</span>
                  </div>
                  <div class="car1-2">
                    运行总数:
                    <span class="car11-1">{{this.towerIngNum}}</span>
                  </div>
                </div>
                <div class="car1">
                  <div class="car1-1">
                    今日预警:
                    <span class="car11-1">{{this.towerWaringNum}}</span>
                  </div>
                  <div class="car1-2">
                    已处理:
                    <span class="car11-1">{{this.towerDealNum}}</span>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="环境监测" name="fourth">
                <div class="car1">
                  <div class="car1-1">
                    设备总数:
                    <span class="car11-1">{{this.weatherNum}}</span>
                  </div>
                  <div class="car1-2">
                    运行总数:
                    <span class="car11-1">{{this.weatherIngNum}}</span>
                  </div>
                </div>
                <div class="car1">
                  <div class="car1-1">
                    今日预警:
                    <span class="car11-1">{{this.weatherWaringNum}}</span>
                  </div>
                  <div class="car1-2">
                    已处理:
                    <span class="car11-1">{{this.weatherDealNum}}</span>
                  </div>
                </div>
              </el-tab-pane>
              <!-- <el-tab-pane label="用电设备" name="fifth">
                <div class="car1">
                  <div class="car1-1">
                    设备总数:
                    <span class="car11-1">5</span>
                  </div>
                  <div class="car1-2">
                    运行总数:
                    <span class="car11-1">0</span>
                  </div>
                </div>
                <div class="car1">
                  <div class="car1-1">
                    今日预警:
                    <span class="car11-1">0</span>
                  </div>
                  <div class="car1-2">
                    今日报警:
                    <span class="car11-1">0</span>
                  </div>
                </div>
              </el-tab-pane> -->
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <div class="f-cdiv">
      <div class="f-c1">
        <div class="f-c1-one">
          <div class="f-adiv1-zi">总承包单位关键岗位情况</div>
          <div class="fc-one1">
            <span style="color:blue">在场人员</span> /
            <span style="color:green">今日执勤</span>
          </div>
        </div>
        <div class="f-c1-two">
          <div class="fc-two1">
            项目经理：
            <span class="fc-two11">2</span> /
            <span class="fc-two12">0</span>
          </div>
          <div class="fc-two1">
            项目总监：
            <span class="fc-two11">2</span> /
            <span class="fc-two12">0</span>
          </div>
          <div class="fc-two1">
            技术负责人：
            <span class="fc-two11">2</span> /
            <span class="fc-two12">0</span>
          </div>
          <div class="fc-two1">
            质量负责人：
            <span class="fc-two11">2</span> /
            <span class="fc-two12">0</span>
          </div>
        </div>
        <div class="f-c1-two">
          <div class="fc-two1">
            安全负责人：
            <span class="fc-two11">2</span> /
            <span class="fc-two12">0</span>
          </div>
          <div class="fc-two1">
            安全员：
            <span class="fc-two11">2</span> /
            <span class="fc-two12">0</span>
          </div>
          <div class="fc-two1">
            劳资专管员：
            <span class="fc-two11">2</span> /
            <span class="fc-two12">0</span>
          </div>
        </div>
      </div>
      <div class="f-c2">
        <img
          src="../../static/img/hb二维码.png"
          alt
          width="110px"
          height="110px"
          style="margin-top:20px ;margin-left:30px"
        />
        <div class="f-c2-2">
          智慧工地APP
          <br />随时随地 移动查看
          <br />在线提交 监管信息
          <br />更安全，更便捷
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import TianQi from "../pages/TianQi";
import http from "../api";
export default {
  data: function () {
    
    this.chartSettings = {
      stack: { 用户: ["attendance_using", "people_id"] },
      area: true,
    };
    return {
      timer:null, //定时器名称
      appcoloer:['blue'],
      // 倒计时
      countDownDays: "",
      safetyDays: "",
      tableData: [],
      // 统计数据
      companyNum: "",
      peopleNunm: "",
      carNum: "",
      groupNum: "",
      equipmentNum: "",
      //车辆识别数据
      carEquipmentNum: "",
      carIngNum:"",
      carComeNum:"",
      carOutNum:"",
      //塔吊设备数据
      towerIngNum:"",
      towerNum:"",
      towerWaringNum:"",
      towerDealNum:"",
      // 环境监测设备数据
      weatherNum:"",
      weatherIngNum:"",
      weatherWaringNum:"",
      weatherDealNum:"",
      // 监控设备
      monitorNum:"",
      monitorIngNum:"",
      monitorWaringNum:"",
      monitorDealNum:"",
      // 现场人数
      data1: "",
      // 第一个统计图
      time: [],

      chartData: {
        //  columns x轴       rowsy轴数据
        columns: ["attendance_using", "people_id"],
        rows: [
          // { time: "0", people_id: "" },
          // { time: "1", people_id: "" },
          // { time: "2", people_id: "" },
          // { time: "3", people_id: "" },
          // { time: "4", people_id: "" },
          // { time: "5", people_id: "" },
          // { time: "6", people_id: "" },
          // { time: "7", people_id: "" },
          // { time: "8", people_id: "" },
          // { time: "9", people_id: "" },
          // { time: "10", people_id: "" },
          // { time: "11", people_id: "" },
          // { time: "12", people_id: "" },
          // { time: "13", people_id: "" },
          // { time: "14", people_id: "" },
          // { time: "15", people_id: "" },
          // { time: "16", people_id: "" },
          // { time: "17", people_id: "" },
          // { time: "18", people_id: "" },
          // { time: "19", people_id: "" },
          // { time: "20", people_id: "" },
          // { time: "21", people_id: "" },
          // { time: "22", people_id: "" },
          // { time: "23", people_id: "" },
          // { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          // { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          // { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          // { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          // { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
        ],
      },
      // 车辆识别
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
     queryInfo(){
         // 门禁表格
          // 门禁表格
    http.getAttendanceNum({}).then((res) => {
      console.log("门禁", res);
      this.tableData = res.data;
    });
         // 人员考勤 buildConsole/getAttendanceCount
    http.getAttendanceCount({}).then((res) => {
      console.log("人员", res);
      this.chartData.rows = res.data;
      for (let i = 0; i < res.data.length; i++) {
        // this.chartData.rows.push({
        //   "人数":this.res.data[i].people_id
        // })
        //  peopleid=res.data[i].people_id
        // this.chartData.rows[i].people_id=res.data[i].people_id
      }
       console.log("事件", peopleid);
    });
    
    //do something
   },

  },
  // components: {
  //   TianQi,
  // },
  mounted() {
    this.queryInfo();
   this.timer = setInterval(() => {
       setTimeout(this.queryInfo, 0)
   }, 1000)

    // 控制台倒计时  getBuildDate
    http.getBuildDates({}).then((res) => {
      console.log("倒计时", res);
      this.countDownDays = res.data.countDownDays;
      this.safetyDays = res.data.safetyDays;
    });
    // 统计数据
    http.getNum({}).then((res) => {
      console.log("控制台", res);
      this.companyNum = res.data.companyNum;
      this.carNum = res.data.carNum;
      this.groupNum = res.data.groupNum;
      this.equipmentNum = res.data.equipmentNum;
      this.peopleNunm = res.data.peopleNunm;
    });
    // 获取现场人数
    http.getPeopleIn({}).then((res) => {
      console.log("现场", res);
      this.data1 = res.data.peopleNum;
    });
    // 获取车辆数据
    http.getCarEquipmentNum({}).then((res) => {
      console.log("车辆识别设备", res);
      
      this.carEquipmentNum=res.data.carEquipmentNum
      this.carIngNum=res.data.carIngNum
      this.carComeNum=res.data.carComeNum
      this.carOutNum=res.data.carOutNum
    });
    // 获取塔吊设备数据
    http.getTowerNum({}).then((res) => {
      console.log("塔吊设备", res);
      
      this.towerIngNum=res.data.towerIngNum
      this.towerNum=res.data.towerNum
      this.towerWaringNum=res.data.towerWaringNum
      this.towerDealNum=res.data.towerDealNum
    });
    // 获取环境监测设备数据
    http.getWeatherNum({}).then((res) => {
      console.log("环境监测设备", res);
      
      this.weatherNum=res.data.weatherNum
      this.weatherIngNum=res.data.weatherIngNum
      this.weatherWaringNum=res.data.weatherWaringNum
      this.weatherDealNum=res.data.weatherDealNum
    });
    // 获取监控设备数据
    http.getMonitorNum({}).then((res) => {
      console.log("监控设备", res);
      
      this.monitorNum=res.data.monitorNum
      this.monitorIngNum=res.data.monitorIngNum
      this.monitorWaringNum=res.data.monitorWaringNum
      this.monitorDealNum=res.data.monitorDealNum
    });


  
  
 

    // 天气
    (window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: 1,
        tmpColor: "FFFFFF",
        tmpSize: 23,
        cityColor: "FFFFFF",
        citySize: 20,
        aqiSize: 16,
        weatherIconSize: 50,
        alertIconSize: 18,
        padding: "40px 40px 40px 40px",
        shadow: "1",
        language: "auto",
        borderRadius: 5,

        fixed: "false",
        vertical: "middle",
        horizontal: "center",
        key: "GhxyemyMgV",
        backgroundColor: "black",
      },
    }),
      (function (d) {
        var c = d.createElement("link");
        c.rel = "stylesheet";
        c.href =
          "https://apip.weatherdt.com/simple/static/css/weather-simple.css?v=2.0";
        var s = d.createElement("script");
        s.src =
          "https://apip.weatherdt.com/simple/static/js/weather-simple.js?v=2.0";
        var sn = d.getElementsByTagName("script")[0];
        sn.parentNode.insertBefore(c, sn);
        sn.parentNode.insertBefore(s, sn);
      })(document);
    console.log(WIDGET);
  },
  beforeDestroy(){
   clearInterval(this.timer);        
   this.timer = null;
   }

};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
/* 天气 */
.tian {
  width: 93%;
  margin-left: 15px;
  position: relative;
  z-index: 1;
  /* width: 50px; */
  /* height: 100px; */
  /* width: 200px; */
  margin-top: 20px;
}
#weather-v2-plugin-simple {
  background-color: black !important;
}
.s-sticker {
  background-color: black !important;
}
.f-all {
  width: 100%;
  height: 650px;
  background-color: rgb(235, 235, 235);
  overflow: hidden;
  overflow-y: scroll;
}
.f-header {
  font-size: 17px;
  height: 65px;
  font-weight: 600;
  line-height: 65px;
  display: flex;
  /* margin-left: 10px; */
  /* margin-top: 10px; */
  background-color: white;
}
.f-header-1 {
  width: 200px;
  margin-left: 15px;
  /* background-color: violet; */
}
.f-header-2 {
  width: 600px;
  /* background-color: violet; */
  margin-left: 477px;
  font-weight: 500;
  display: flex;
  /* margin-right: 120px; */
}
.dao {
  display: flex;
}
.f-header-21 {
  width: 32px;
  height: 30px;
  margin-top: 18px;
  background-color: rgb(250, 245, 245);
  line-height: 30px;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  color: rgb(1, 148, 1);
  margin-left: 7px;
}
.span1 {
  display: inline-block;
  margin-left: 10px;
}

.f-adiv {
  display: flex;
  width: 100%;
  height: 210px;
  margin-top: 12px;
  /* background-color: white; */
  /* margin-top: 10px; */
  /* margin-left: 10px; */
}
.f-adiv1 {
  width: 62%;
  height: 210px;
  background-color: white;
  /* background-color: violet; */
}
.f-adiv1-zi {
  font-size: 17px;
  font-weight: 600;
  margin-left: 15px;
  margin-top: 15px;
  /* overflow: hidden; */
}
.f-adiv1-two {
  width: 90%;
  height: 120px;
  margin-left: 25px;
  margin-top: 25px;
  /* background-color: rgb(236, 236, 236); */
  display: flex;
}
.f-a-two1 {
  width: 125px;
  height: 120px;
  /* background-color: aquamarine; */
  margin-left: 10px;
}
.f-a-two1-zi {
  font-size: 16px;
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
}
.f-a-two1-zi2 {
  font-size: 25px;
  margin-top: 10px;
  font-weight: 700;
  text-align: center;
  color: rgb(82, 82, 196);
}
.f-adiv2 {
  width: 37%;
  height: 210px;
  margin-left: 12px;
  background-color: white;
  /* background-color: rgb(201, 50, 201); */
}
.f-tianqi {
  /* width: 100%; */
  height: 150px;
  /* background-color: grey; */
  margin-top: 20px;
  margin-left: 20px;
}
.f-bdiv {
  width: 100%;
  height: 520px;
  /* background-color: white; */
  margin-top: 12px;
  display: flex;
}
.f-bdiv1 {
  width: 62%;
  height: 520px;
  /* background-color: lightcyan; */
  background-color: white;
}
.f-b1-two {
  width: 400px;
  height: 75px;
  /* background-color: hotpink; */
  margin-top: 20px;
  margin-left: 35px;
  display: flex;
}
.f-bi-two1 {
  width: 120px;
  height: 75px;
  background-color: rgb(240, 240, 240);
  margin-left: 10px;
}
.f-bi-two1-zi1 {
  font-size: 15px;
  /* font-weight: 600; */
  color: rgb(87, 87, 87);
  text-align: center;
  margin-top: 7px;
}
.f-bi-two1-zi2 {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 700;
  color: black;
  margin-left: 15px;
  /* text-align: center; */
}
.f-b1-three {
  margin-top: 20px;
}
.f-bdiv2 {
  width: 37%;
  height: 520px;
  margin-left: 12px;
  overflow: hidden;
  /* background-color: rgb(255, 255, 255); */
}
.f-bdiv2-1 {
  height: 345px;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}
.f-bdiv2-2 {
  height: 160px;
  margin-top: 15px;
  background-color: white;
  overflow: hidden;
}
.f-bd-table {
  overflow: scoll;
  position: relative;
  z-index: 0;
}
.f-el-tabs {
  width: 395px !important;
  margin-left: 35px;
  z-index: inherit;
  position: relative;
}
.car1 {
  display: flex;
  overflow: hidden;
  margin-left: 50px;
}
.car1-1 {
  width: 150px;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  /* background-color: rgb(131, 187, 168); */
}
.car11-1 {
  width: 50;
  font-size: 18px;
  font-weight: 700;
  display: inline-block;
  width: 50px;
}
.car1-2 {
  width: 150px;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  /* background-color: rgb(68, 88, 82); */
  /* background-color: aquamarine; */
  margin-left: 50px;
}
.f-cdiv {
  width: 100%;
  height: 175px;
  background-color: rgb(235, 235, 235);
  margin-top: 12px;
  display: flex;
}
.f-c1 {
  width: 62%;
  height: 160px;
  background-color: white;
  overflow: hidden;
}
.f-c1-one {
  display: flex;
}
.fc-one1 {
  margin-top: 18px;
  margin-left: 450px;
}
.f-c1-two {
  height: 40px;
  /* background-color: lightgreen; */
  margin-top: 10px;
  display: flex;
}
.fc-two1 {
  width: 120px;
  height: 40px;
  /* background-color: lightpink; */
  margin-left: 40px;
  line-height: 40px;
}
.fc-two11 {
  color: blue;
  font-size: 17px;
  font-weight: 600;
}
.fc-two12 {
  color: green;
  font-size: 17px;
  font-weight: 600;
}
.f-c2 {
  width: 37%;
  height: 160px;
  margin-left: 15px;
  background-color: white;
  display: flex;
}
.f-c2-2 {
  margin-left: 50px;
  font-size: 15px;
  margin-top: 20px;
}
.f-bd-table {
  margin-left: 20px;
  margin-top: 20px;
}
</style>